<template>
  <div class="student-table-container">
    <table class="student-table">
      <thead>
        <tr class="table-header">
          <th>序号</th>
          <th>学生</th>
          <th>密码</th>
          <th>课堂活跃程度</th>
          <th>成绩</th>
          <th>学习情况</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="student in students" :key="student.id" class="table-row">
          <td>{{ student.id }}</td>
          <td>{{ student.name }}</td>
          <td>{{ student.password }}</td>
          <td>{{ student.activityLevel }}</td>
          <td>{{ student.score }}</td>
          <td>{{ student.studyStatus }}</td>
          <td>
            <button class="edit-button" @click="openEditDialog(student)">修改</button>
            <button class="delete-button" @click="openDeleteDialog(student.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <EditStudentDialog
      v-model:visible="isEditDialogVisible"
      :student="selectedStudent"
      @update:student="updateStudent"
    />

    <DeleteConfirmationDialog
      v-model:visible="isDeleteDialogVisible"
      :studentId="selectedStudentId"
      @delete:student="deleteStudent"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import EditStudentDialog from './EditStudentDialog.vue';
import DeleteConfirmationDialog from './DeleteConfirmationDialog.vue';
import { Student, StudentUpdate } from '../types/student';

export default defineComponent({
  components: {
    EditStudentDialog,
    DeleteConfirmationDialog
  },
  props: {
    students: {
      type: Array,
      required: true
    }
  },
  emits: ['update:students', 'delete:student'],
  setup(props, { emit }) {
    const isEditDialogVisible = ref(false);
    const isDeleteDialogVisible = ref(false);
    const selectedStudent = ref<Student | null>(null);
    const selectedStudentId = ref<number | null>(null);

    const openEditDialog = (student: Student) => {
      selectedStudent.value = { ...student };
      isEditDialogVisible.value = true;
    };

    const openDeleteDialog = (studentId: number) => {
      selectedStudentId.value = studentId;
      isDeleteDialogVisible.value = true;
    };

    const updateStudent = (updatedStudent: StudentUpdate) => {
      if (!selectedStudent.value) return;

      const updated = { ...selectedStudent.value, ...updatedStudent };
      const index = props.students.findIndex(s => s.id === updated.id);
      if (index !== -1) {
        const newStudents = [...props.students];
        newStudents[index] = updated;
        emit('update:students', newStudents);
      }

      isEditDialogVisible.value = false;
    };

    const deleteStudent = () => {
      if (selectedStudentId.value) {
        emit('delete:student', selectedStudentId.value);
      }
      isDeleteDialogVisible.value = false;
    };

    return {
      isEditDialogVisible,
      isDeleteDialogVisible,
      selectedStudent,
      selectedStudentId,
      openEditDialog,
      openDeleteDialog,
      updateStudent,
      deleteStudent
    };
  }
});
</script>

<style scoped>
.student-table-container {
  margin-left: 160px;
  padding: 20px;
}

.student-table {
  width: 100%;
  border-collapse: collapse;
}

.table-header {
  background-color: #f2f2f2;
}

.table-row {
  border-bottom: 1px solid #ddd;
}

.table-row:nth-child(even) {
  background-color: #f9f9f9;
}

td {
  padding: 12px 15px;
  text-align: left;
}

.edit-button, .delete-button {
  padding: 5px 10px;
  margin-right: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.edit-button {
  background-color: #4CAF50;
  color: white;
}

.delete-button {
  background-color: #f44336;
  color: white;
}

.edit-button:hover {
  background-color: #45a049;
}

.delete-button:hover {
  background-color: #d32f2f;
}
</style>
